import PropTypes from 'prop-types'
import React, { memo, useState } from 'react'
import { TabsWrapper } from './style'
import classNames from 'classnames'
import ScrollView from '@/base-ui/scroll-view'

const SectionTabs = memo((props) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const { tabNames = [], tabClick } = props

  function itemClickHandle(index, name){
    setCurrentIndex(index)
    tabClick(name)
  }
  return (
    <TabsWrapper>
      <ScrollView>
          {tabNames.map((item, index) => <div key={item}
            className={classNames('item', { active: index === currentIndex })}
            onClick={e => itemClickHandle(index, item)}
          >{item}</div>)}
      </ScrollView>
    </TabsWrapper>
  )
})

SectionTabs.propTypes = {
  tabNames:PropTypes.array,
  tabClick:PropTypes.func
}

export default SectionTabs